<template>
  <div class="data-list">
    <!-- 面包屑 -->
    <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
    <div class="page-content">
      <div class="page-top">
        <div class="title">通知记录</div>
      </div>
      <div class="table-box">
        <div class="top-box">
          <div class="left">
            <div>
              时间范围:
              <a-range-picker
                @change="searchFun"
                style="width: 200px; margin-right: 20px"
                v-model="time"
              />
            </div>
          </div>
          <div class="right"></div>
        </div>
        <a-table
          :columns="columns"
          :data-source="listData"
          :pagination="pagination"
          :loading="tableLoading"
          @change="pageChange"
        >
          <template slot="userInfo" slot-scope="text, record">
            <span v-if="userId">{{userInfo.realName}}</span>
            <a v-else @click="openUserModal(record)">{{record.userInfo.length}}</a>
          </template>
          <template slot="message" slot-scope="text, record">
            <div>项目: {{record.proName}}</div>
            <div>本次变化量: {{Number(record.value1).toFixed(2)}}, 阈值: {{`${Number(record.single).toFixed(2)} ~ ${Number(record.singleDown).toFixed(2)}`}}</div>
            <div>累计变化量: {{Number(record.value6).toFixed(2)}}, 阈值: {{`${Number(record.sum).toFixed(2)} ~ ${Number(record.sumDown).toFixed(2)}`}}</div>
          </template>
          
        </a-table>
      </div>
    </div>
    <UserModal ref="UserModal" :listData="userInfoList"/>
  </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import UserModal from "./components/UserModal";
import { messageNotificationByUserId } from "@/request/api";
import moment from "moment";
import { mapState } from "vuex";
export default {
  props: {},
  data() {
    return {
      hreadcrumbAry: [{ name: "首页" }, { name: "通知记录" }],
      tableLoading: false,
      pagination: {
        //分页参数
        current: 1, //当前页
        total: 0, //总条数
        pageSize: 10, //每页多少条
        showQuickJumper: true, //显示跳转到第N页的输入框
        showSizeChanger: true,
        showTotal: (total, range) => `共${total}条记录`,
      },
      columns: [
        {
          title: "序号", //标题
          dataIndex: "key",
          width: 80,
        },
        {
          title: "消息接收者",
          dataIndex: "",
          scopedSlots: { customRender: "userInfo" },
        },
        {
          title: "所属项目",
          ellipsis: true, //出现省略号
          dataIndex: "proName",
        },
        {
          title: "通知时间",
          dataIndex: "date",
        },
        {
          title: "通知类型",
          dataIndex: "type",
        },
        {
          title: "测点名称",
          dataIndex: "pointName",
        },
        {
          title: "通知内容",
          dataIndex: "",
          width:300,
          scopedSlots: { customRender: "message" },
        },
        {
          title: "状态",
          dataIndex: "status",
        },
      ],
      listData: [],
      time: [],
      userInfoList:[],
    };
  },
  components: {
    Hreadcrumb,
    UserModal
  },
  created() {
    this.messageNotificationByUserId();
  },
  computed:{
    userId(){
      return this.$route.query.userId
    },
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  watch:{
    userId(){
      this.messageNotificationByUserId();
    },
  },
  mounted() {},
  methods: {
    openUserModal(item){
      this.userInfoList = item.userInfo;
      this.$refs.UserModal.visible = true;
    },
    searchFun() {
      this.pagination.current = 1;
      this.messageNotificationByUserId();
    },
    async messageNotificationByUserId() {
      this.tableLoading = true;
      let { data } = await messageNotificationByUserId({
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        userId: this.userId,
        startTime:
          this.time.length > 0 ? moment(this.time[0]).format("YYYY-MM-DD") : "",
        endTime:
          this.time.length > 0 ? moment(this.time[1]).format("YYYY-MM-DD") : "",
      });
      if (data && data.code === 200) {
        this.pagination.total = data.result.total;
        this.listData = data.result.list;
        this.listData.forEach((item, index) => {
          item.key = this.$listNum(this.pagination.current,index); //table组件要用 唯一标识
          item.type = '数据告警'
          item.status = '推送成功'
        });
        console.log(this.listData);
      }else{
        data && this.$message.error(data.message);
      }
      this.tableLoading = false;
    },
    // 翻页
    pageChange(pageObj) {
      console.log("Page: ", pageObj);
      this.pagination = pageObj;
      this.messageNotificationByUserId();
    },
  },
};
</script>
<style lang="less" scoped>
.page-top {
  background: #fff;
  .title {
    font-size: 16px;
    font-weight: bold;
    padding: 20px 24px 20px;
  }
}
.page-content {
  padding: 20px 20px 50px;
  .table-box {
    padding: 0 20px;
    background: #fff;
    .top-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      padding-top: 20px;
      background: #fff;
    }
  }
}
</style>